<template>
  <div class="image-box">
    <a-image
      v-if="src != null && src !== ''"
      :placeholder="true"
      :src="src"
      :width="width"
      :height="height"
      :fallback="defaultUrl"
    />
    <a-image v-else :placeholder="true" :src="defaultUrl" :width="width" :height="height" :preview="false" />
  </div>
</template>

<script name="ImageBox" lang="ts" setup>
import { defineProps } from "vue";

const defaultUrl = new URL("./../../assets/images/default.png", import.meta.url).href;

const props = defineProps({
  src: {
    type: String,
    default: ""
  },
  width: {
    type: Number,
    default: 50
  },
  height: {
    type: Number,
    default: 50
  }
});
</script>

<style lang="less" scoped>
.image-box {
  :deep(.ant-image) {
    display: flex;
    align-items: center;

    img {
      max-width: 100%;
      max-height: 100%;
      align-items: center;
    }
  }
}
</style>
